/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Descriptions, DatePicker,
} from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList:[],
      all_staffs:[],
      all_departments:[]
    };
  }

  componentDidMount() {
    const that=this;
    request(`/all_departments`, {
      method: 'GET',
    }).then((response)=> {
      console.log('all_departments', response)
      if(response.status===200){
        that.setState({
          all_departments:response.data.data
        })
      }
    })
    this.fetAllUser()
  }
  fetAllUser=(department)=>{
    const that=this;
    request(`/all_staffs`, {
      method: 'GET',
      params:{
        department_id:department
      }
    }).then((response)=> {
      console.log('all_structures', response)
      if(response.status===200){
        that.setState({
          all_staffs:response.data.data
        })
      }
    })
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form>
          <Descriptions  column={4}   className={'blue-descriptions'} title={<div style={{textAlign:'center'}}>工单详情</div>} bordered>
            <Descriptions.Item label="设备编号"  span={2}>
              {getFieldDecorator('device_number', {
                initialValue:this.props.editRecord?this.props.editRecord.device_number:'',
              })(
                <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="工单联系人"  span={2}>
              {getFieldDecorator('contact_name', {
                initialValue: this.props.editRecord?this.props.editRecord.contact_name:'',
              })(
               <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="联系人手机"  span={2}>
              {getFieldDecorator('mobile', {
                initialValue:this.props.editRecord?this.props.editRecord.mobile:'',
              })(
                <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="工单备注"  span={2}>
              {getFieldDecorator('remark', {
                initialValue: this.props.editRecord?this.props.editRecord.remark:'',
              })(
                <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label={<span ><span style={{color:'red',top:'2px',position:'relative'}}>* </span> 工单负责部门</span>} span={2}>
              {getFieldDecorator('department_id', {
                initialValue: this.props.editRecord?this.props.editRecord.supervisor.department_id:'',
              })(
                <Select onChange={(e)=>{
                  console.log('e',e)
                  this.fetAllUser(e)
                }}>
                  {
                    this.state.all_departments.map((item,index)=>{
                      return <Option key={index} value={item.id}>
                        {item.name}
                      </Option>
                    })
                  }
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label={<span ><span style={{color:'red',top:'2px',position:'relative'}}>* </span> 工单负责人</span>} span={2}>
              {getFieldDecorator('supervisor_id', {
                initialValue: this.props.editRecord?this.props.editRecord.supervisor.id:'',
              })(
                <Select >
                  {
                    this.state.all_staffs.map((item,index)=>{
                      return <Option key={index} value={item.id}>
                        {item.name}
                      </Option>
                    })
                  }
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label={<span ><span style={{color:'red',top:'2px',position:'relative'}}>* </span> 工单主题</span>} span={4}>
              {getFieldDecorator('title', {
                initialValue: this.props.editRecord?this.props.editRecord.title:'',
                rules: [{ required: true, message: '请输入工单主题' }],
              })(
                <TextArea  rows={3}  />
              )}
            </Descriptions.Item>
            <Descriptions.Item label={<span ><span style={{color:'red',top:'2px',position:'relative'}}>* </span> 工单地址</span>} span={4}>
              {getFieldDecorator('address', {
                initialValue: this.props.editRecord?this.props.editRecord.address:'',
                rules: [{ required: true, message: '请输入工单地址' }],
              })(
                <Input    />
              )}
            </Descriptions.Item>
          </Descriptions>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


